<template>
    <div class="main_item">
        <div class="router_item">
            <router-link to="/goHome/{username}" class="link_item">回到首页</router-link>
        </div>
        <el-card class="card_item">
            <el-table class="product" :data="product" >
                <el-table-column prop="itemId" label="itemId">
                    <div class="item" slot-scope="scope">{{scope.row.itemId}}</div> 
                </el-table-column>
                <el-table-column prop="productId" label="productId">
                    <div class="item" slot-scope="scope">{{scope.row.productId}}</div>
                </el-table-column>
                <el-table-column prop="listPrice" label="listPrice">
                    <div class="item" slot-scope="scope">
                        <el-input class="item__input" v-model="scope.row.listPrice" placeholder="请输入内容"/>
                    </div>
                </el-table-column>
                <!-- <el-table-column prop="unitCost" label="unitCost" >
                    <div class="item" slot-scope="scope">
                        <el-input class="item__input" v-model="scope.row.unitCost" placeholder="请输入内容"/>
                    </div>
                </el-table-column> -->
                <el-table-column prop="supplierId" label="supplier">
                    <div class="item" slot-scope="scope">
                        <el-input class="item__input" v-model="scope.row.supplier" placeholder="请输入内容"/>
                    </div>
                </el-table-column>
                <el-table-column prop="status" label="status">
                    <div class="item" slot-scope="scope">
                        <el-input class="item__input" v-model="scope.row.status" placeholder="请输入内容"/>
                    </div>
                </el-table-column>
                <el-table-column prop="attribute1" label="attr1">
                    <div class="item" slot-scope="scope">
                        <el-input class="item__input" v-model="scope.row.attr1" placeholder="请输入内容"/>
                    </div>
                </el-table-column>
                <el-table-column prop="quantity" label="quantity">
                    <div class="item" slot-scope="scope">
                        <el-input class="item__input" v-model="scope.row.quantity" placeholder="请输入内容"/>
                    </div>
                </el-table-column>
                <el-table-column label="修改商品">
                    <template slot-scope="scope">
                        <el-button @click="updateItem(scope.row)" type="primary">
                            <span>修改信息</span>
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="删除商品" >
                    <template slot-scope="scope">
                        <el-button @click="deleteItem(scope.row.itemId)" type="danger">
                            <span>删除</span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div class="btn_item">
            <el-button @click="add=>{this.$router.push({name:'Add' , params:{type:this.type}})}" type="primary">添加</el-button>
            <el-button @click="back" type="primary" style="margin-left: 50px;">返回</el-button>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { jwtDecode } from 'jwt-decode'
export default {
    name:   'Item',
    data(){
        return {
            username    : jwtDecode(localStorage.getItem('token')).username,
            token       : localStorage.getItem('token'),
            product     : [],
            productId   : this.$route.params.id,
            type:   'item',
        }
    },
    methods : {
        //使用结构赋值进行错误处理
        promise_error_process(promise){
            return promise.then(result=>[null,result])
                           .catch(err=>[err,null])
        },
        async getItemByAjax(){
            const response = await axios({
                url :  `http://localhost:8081/items/${this.productId}`,
                method : 'GET',
                withCredentials : true,
                headers :{
                    'Authorization': this.token // 将token放在请求头中
                }
            })
            return response
        },
        async getItem(){
            const [err,result] = await this.promise_error_process(this.getItemByAjax())
            if(err){
                console.log('请求错误')
            }else{
                console.log(result.data.data)
                this.product = result.data.data
            }
        },
        async updateByAjax(item){
            const response = await axios({
                url :  'http://localhost:8081/items',
                method : 'PUT',
                withCredentials : true,
                headers :{
                    'Content-Type' : 'application/json',
                    'Authorization': this.token // 将token放在请求头中
                },
                data : item
            })
            return response
        },
        back(){
            this.$router.back()
        },
        async updateItem(item){
            const [err,result] = await this.promise_error_process(this.updateByAjax(item))
            if(err){
                console.log('请求错误')
            }else{
                console.log(result)
            }
        },
        async deleteByAjax(id){
            const response = await axios({
                url :  `http://localhost:8081/items/${id}`,
                method : 'DELETE',
                withCredentials : true,
                headers :{
                    'Authorization': this.token // 将token放在请求头中
                },
            })
            return response
        },
        async deleteItem(id){
            console.log(id)
            const [err,result] = await this.promise_error_process(this.deleteByAjax(id))
            if(err){
                console.log('请求错误')
            }else{
                console.log(result)
                this.product = this.product.filter(item => item.itemId != id)
            }
        }
    },
    created(){
        this.getItem()
    }
}
</script>

<style scoped>
.main_item{
    text-align: center;
}
.router_item{
    text-align: left;
    padding-left: 50px;
}
.link_item{
    text-decoration: none;
    font-size: 20px;
}
.card_item{
    width: 70%;
    margin-left: 15%;
    margin-top: 50px;
    padding: 30px;
}
.btn_item{
    padding-top: 50px;
}
</style>